---
title: "Ajax without JQuery"
date: 2017
categories:
- js
tags:
---

<div id="content">
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#org786656c">Quick Reference</a></li>
<li><a href="#org5e4162e">创建 XMLHttpRequest 对象</a></li>
<li><a href="#org411f99e">Send Request</a></li>
<li><a href="#org128f0b4">处理响应</a>
<ul>
<li><a href="#org9ebd0d0">同步请求，在send方法之后，使用 {% raw %} XMLHttpRequest {% endraw %} 对象的 {% raw %} responseXML {% endraw %} 或 {% raw %} responeText {% endraw %} 获取服务器的响应</a></li>
<li><a href="#orgaa96b3a">异步请求，使用 {% raw %} XMLHttpRequest {% endraw %} 的 {% raw %} onreadystatechange {% endraw %} 事件，然后在事件回调中使用 {% raw %} XMLHttpRequest {% endraw %} 的 {% raw %} responseXML/responseText {% endraw %} 属性</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="outline-2" id="outline-container-org786656c">
<h2 id="org786656c">Quick Reference</h2>
<div class="outline-text-2" id="text-org786656c">
<div class="org-src-container">
<pre class="src src-js"><span style="font-weight: bold; font-style: italic;">// </span><span style="font-weight: bold; font-style: italic;">1. create XMLHttpRequest object</span>
<span style="font-weight: bold;">var</span> <span style="font-weight: bold; font-style: italic;">xmlhttp</span>;
<span style="font-weight: bold;">if</span> (window.XMLHttpRequest) {
    <span style="font-weight: bold; font-style: italic;">//  </span><span style="font-weight: bold; font-style: italic;">IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码</span>
    xmlhttp=<span style="font-weight: bold;">new</span> <span style="font-weight: bold; text-decoration: underline;">XMLHttpRequest</span>();
} <span style="font-weight: bold;">else</span> {
    <span style="font-weight: bold; font-style: italic;">// </span><span style="font-weight: bold; font-style: italic;">IE6, IE5 浏览器执行代码</span>
    xmlhttp=<span style="font-weight: bold;">new</span> <span style="font-weight: bold; text-decoration: underline;">ActiveXObject</span>(<span style="font-style: italic;">"Microsoft.XMLHTTP"</span>);
}
<span style="font-weight: bold; font-style: italic;">// </span><span style="font-weight: bold; font-style: italic;">2. open connection and post data</span>
xmlhttp.open(<span style="font-style: italic;">"POST"</span>,<span style="font-style: italic;">"/submit"</span>,<span style="font-weight: bold; text-decoration: underline;">true</span>);
xmlhttp.setRequestHeader(<span style="font-style: italic;">"Content-type"</span>,<span style="font-style: italic;">"application/x-www-form-urlencoded"</span>);
xmlhttp.send(<span style="font-style: italic;">"foo=bar"</span>);
<span style="font-weight: bold; font-style: italic;">// </span><span style="font-weight: bold; font-style: italic;">3. handler response</span>
xmlhttp.onreadystatechange = <span style="font-weight: bold;">function</span>() {
    <span style="font-weight: bold;">if</span> (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) {
        resp = xmlhttp.responseText;
    }
}
</pre>
</div>
</div>
</div>
<div class="outline-2" id="outline-container-org5e4162e">
<h2 id="org5e4162e">创建 XMLHttpRequest 对象</h2>
<div class="outline-text-2" id="text-org5e4162e">
<p>
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
</p>
<div class="org-src-container">
<pre class="src src-js"><span style="font-weight: bold;">var</span> <span style="font-weight: bold; font-style: italic;">xmlhttp</span>;
<span style="font-weight: bold;">if</span> (window.XMLHttpRequest) {
    <span style="font-weight: bold; font-style: italic;">//  </span><span style="font-weight: bold; font-style: italic;">IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码</span>
    xmlhttp=<span style="font-weight: bold;">new</span> <span style="font-weight: bold; text-decoration: underline;">XMLHttpRequest</span>();
} <span style="font-weight: bold;">else</span> {
    <span style="font-weight: bold; font-style: italic;">// </span><span style="font-weight: bold; font-style: italic;">IE6, IE5 浏览器执行代码</span>
    xmlhttp=<span style="font-weight: bold;">new</span> <span style="font-weight: bold; text-decoration: underline;">ActiveXObject</span>(<span style="font-style: italic;">"Microsoft.XMLHTTP"</span>);
}
</pre>
</div>
</div>
</div>
<div class="outline-2" id="outline-container-org411f99e">
<h2 id="org411f99e">Send Request</h2>
<div class="outline-text-2" id="text-org411f99e">
<p>
XMLHttpRequest的方法如下
</p>
<table border="2" cellpadding="6" cellspacing="0" frame="hsides" rules="groups">
<colgroup>
<col class="org-left"/>
<col class="org-left"/>
</colgroup>
<thead>
<tr>
<th class="org-left" scope="col">Method</th>
<th class="org-left" scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="org-left">open(method,url,async)</td>
<td class="org-left">打开与服务器的连接，设置参数：</td>
</tr>
<tr>
<td class="org-left"> </td>
<td class="org-left">- method: GET/POST</td>
</tr>
<tr>
<td class="org-left"> </td>
<td class="org-left">- url: request url</td>
</tr>
<tr>
<td class="org-left"> </td>
<td class="org-left">- async: true or false, 异步还是同步</td>
</tr>
<tr>
<td class="org-left">setRequestHeader(header,value)</td>
<td class="org-left">设置请求头</td>
</tr>
<tr>
<td class="org-left">Send(string)</td>
<td class="org-left">将请求发送到服务器，参数：</td>
</tr>
<tr>
<td class="org-left"> </td>
<td class="org-left">- string: optional, POST only</td>
</tr>
</tbody>
</table>
<div class="org-src-container">
<pre class="src src-js">xmlhttp.open(<span style="font-style: italic;">"GET"</span>,<span style="font-style: italic;">"/"</span>,<span style="font-weight: bold; text-decoration: underline;">true</span>);
xmlhttp.send();

xmlhttp.open(<span style="font-style: italic;">'POST'</span>, <span style="font-style: italic;">'/submit'</span>, <span style="font-weight: bold; text-decoration: underline;">true</span>);
xmlhttp.send(<span style="font-style: italic;">'{"name": "foo", "val": "bar"}'</span>)
</pre>
</div>
</div>
</div>
<div class="outline-2" id="outline-container-org128f0b4">
<h2 id="org128f0b4">处理响应</h2>
<div class="outline-text-2" id="text-org128f0b4">
</div>
<div class="outline-3" id="outline-container-org9ebd0d0">
<h3 id="org9ebd0d0">同步请求，在send方法之后，使用 {% raw %} XMLHttpRequest {% endraw %} 对象的 {% raw %} responseXML {% endraw %} 或 {% raw %} responeText {% endraw %} 获取服务器的响应</h3>
</div>
<div class="outline-3" id="outline-container-orgaa96b3a">
<h3 id="orgaa96b3a">异步请求，使用 {% raw %} XMLHttpRequest {% endraw %} 的 {% raw %} onreadystatechange {% endraw %} 事件，然后在事件回调中使用 {% raw %} XMLHttpRequest {% endraw %} 的 {% raw %} responseXML/responseText {% endraw %} 属性</h3>
<div class="outline-text-3" id="text-orgaa96b3a">
<div class="org-src-container">
<pre class="src src-js">xmlhttp.onreadystatechange=<span style="font-weight: bold;">function</span>()
{
    <span style="font-weight: bold;">if</span> (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200)
    {
        resp = xmlhttp.responseText;
    }
}
</pre>
</div>
<table border="2" cellpadding="6" cellspacing="0" frame="hsides" rules="groups">
<colgroup>
<col class="org-right"/>
<col class="org-left"/>
</colgroup>
<tbody>
<tr>
<td class="org-right">readyState</td>
<td class="org-left">Description</td>
</tr>
<tr>
<td class="org-right">0</td>
<td class="org-left">请求未初始化</td>
</tr>
<tr>
<td class="org-right">1</td>
<td class="org-left">服务器连接已建立</td>
</tr>
<tr>
<td class="org-right">2</td>
<td class="org-left">请求已接收</td>
</tr>
<tr>
<td class="org-right">3</td>
<td class="org-left">请求处理中</td>
</tr>
<tr>
<td class="org-right">4</td>
<td class="org-left">请求已完成，且响应已就绪</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="status" id="postamble">
<p class="date">Date: 2017</p>
<p class="author">Author: gdme1320</p>
<p class="validation"><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>
</div>
